<template>
  <div class="home-footer">
    <router-link
      tag="div"
      v-for="(item, index) in navList" :key="item.id"
      class="footer-nav"
      @click="handleClick(index)"
      :to="item.url"
    >
      <span class="icon iconfont" v-html="item.icon"></span>
      <span>{{item.text}}</span>
    </router-link>
  </div>
</template>
<script>
export default {
  data () {
    return {
      navList: [
        {
          id: 1,
          icon: '&#xe656;',
          text: '首页',
          url: '/home'
        },
        {
          id: 2,
          icon: '&#xe61a;',
          text: '分类',
          url: '/category'
        },
        {
          id: 3,
          icon: '&#xe66e;',
          text: '星球',
          url: '/planet'
        },
        {
          id: 4,
          icon: '&#xe610;',
          text: '购物车',
          url: '/cart'
        },
        {
          id: 5,
          icon: '&#xe61c;',
          text: '我的',
          url: '/member'
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/css/mixin';
.home-footer {
  height: px2rem(76 / 2);
  display: flex;
  justify-content: space-around;
  position: fixed;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  .footer-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #999;
    span {
      display: block;
      text-align: center;
      font-size: px2rem(22 / 2);
    }
    .icon {
      font-size: px2rem(40 / 2);
      margin-bottom: px2rem(5.5 / 2);
    }
  }
  .router-link-active {
    color: #ff6700;
  }
}
</style>
